<template>
  <div class="home">
    <div class="toper">
      <p>用户审核</p>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>社区管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户审核</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <div class="header">
        <el-input placeholder="申请人员" v-model="applyName" clearable>
        </el-input>
        <el-input placeholder="手机号码" v-model="phone" clearable> </el-input>
        <el-input placeholder="证件号码" v-model="idCard" clearable> </el-input>
        <el-input placeholder="房屋位置" v-model="houseAddress" clearable>
        </el-input>
        <el-select v-model="applyState" clearable placeholder="申请状态">
          <el-option
            v-for="item in aState"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-date-picker
          clearable
          v-model="timeValue"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        >
        </el-date-picker>
        <el-button
          style="background-color: #0bb197"
          type="success"
          icon="el-icon-search"
          @click="search"
          >查询</el-button
        >
        <el-button type="" icon="el-icon-refresh" class="reset" @click="reset"
          >重置</el-button
        >
      </div>
      <div class="body">
        <div class="bodyHeader">
          <p>查询结果列表</p>
        </div>
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column align="center" prop="id" label="序号">
          </el-table-column>
          <el-table-column align="center" prop="applyName" label="申请人员">
          </el-table-column>
          <el-table-column align="center" prop="sex" label="性别">
            <template slot-scope="scope">
              <span>{{ scope.row.sex == 0 ? "男" : "女" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="phone"
            label="手机号码"
            width="130"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="idNumber"
            label="证件号码"
            width="130"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="house.houseAddress"
            label="申请绑定房屋"
            width="150"
          >
          </el-table-column>
          <el-table-column align="center" prop="ownerType" label="人员类型">
            <template slot-scope="scope">
              <span>{{
                scope.row.ownerType == 0
                  ? "租户"
                  : scope.row.ownerType == 1
                  ? "家庭成员"
                  : "业主"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="applyTime"
            label="申请时间"
            width="200"
          >
            <template slot-scope="scope">
              <span>{{ timeTrans(scope.row.applyTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="applyState" label="申请状态">
            <template slot-scope="scope">
              <span>{{
                scope.row.applyState == 0 ? "待审核" : "审核通过"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.applyState == 0"
                style="color: #0bb197"
                type="text"
                @click="userAudit(scope.row)"
                >用户审核</el-button
              >
              <span v-else></span>
              <el-button
                style="color: #0bb197"
                type="text"
                @click="deleteRow(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :background="true"
          class="msg-pagination-container"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="count"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import time from "../utils/time";
export default {
  mixins: [time],
  data() {
    return {
      page: 1,
      count: 5,
      total: 1,
      id: "",
      timeValue: [],
      applyName: "",
      applyState: "",
      aState: [
        {
          value: 0,
          label: "待审核",
        },
        {
          value: 1,
          label: "审核通过",
        },
      ],
      houseAddress: "",
      idCard: "",
      phone: "",
      startTime: "",
      endTime: "",
      tableData: [],
      userA: {},
    };
  },
  methods: {
    handleSizeChange(val) {
      this.page = 1;
      this.count = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    getData: function () {
      if (this.timeValue == null) {
        this.timeValue = [];
      }
      this.$axios({
        url: "/smart/userApply/list",
        method: "get",
        params: {
          pageNum: this.page,
          pageSize: this.count,
          applyName: this.applyName,
          applyState: this.applyState,
          houseAddress: this.houseAddress,
          idCard: this.idCard,
          phone: this.phone,
          startTime: this.timeValue[0],
          endTime: this.timeValue[1],
        },
      }).then(({ data }) => {
        if (data.code == "00000") {
          this.tableData = data.data.list;
          this.total = data.data.total;
        } else {
          this.$message.error("数据加载失败！");
        }
      });
    },
    reset: function () {
      this.applyName = "";
      this.applyState = "";
      this.houseAddress = "";
      this.idCard = "";
      this.phone = "";
      this.timeValue = [];
      this.getData();
    },
    search: function () {
      this.getData();
    },
    userAudit(row) {
      // console.log( "11112121",row);
      this.$confirm("是否确认通过用户(" + row.phone + ")申请认证？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        confirmButtonClass: "btnColorTTT",
        cancelButtonClass: "btnColorCCC",
      })
        .then(() => {
          // 赋值
          let userA = { ...row };
          this.userA = userA;
          this.userA.applyState = 0;
          // this.userA.id = this.userA.applyId;
          // delete this.userA.applyId;
          // this.userA.applyId=this.id
          // console.log(this.userA);
          this.$axios({
            url: "/smart/userApply/editStatus",
            method: "put",
            data: this.userA,
          }).then(({ data }) => {
            if (data.code == "00000") {
              this.$message.success("成功");
              this.getData();
            } else {
              this.$message.error("失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "取消审核",
          });
        });
    },
    deleteRow(row) {
      console.log(row);
      this.$axios({
        url: "/smart/userApply/del/" + row,
        method: "DELETE",
      }).then(({ data }) => {
        if (data.code == "00000") {
          this.$message.success("删除成功");
          this.getData();
        } else {
          this.$message.error("删除失败");
        }
      });
    },
  },
  mounted: function () {
    this.getData();
  },
};
</script>

<style lang="less" scoped>
.home {
  height: 95%;
  margin: 20px 20px 0px 20px;
  .toper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    p {
      margin-bottom: 20px;
      color: #333333;
    }
  }
  .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    .header {
      width: 100%;
      height: 80px;
      background-color: #ffffff;
      border-radius: 8px;
      margin-bottom: 25px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .el-input,
      .el-select,
      .el-date-picker {
        width: 200px;
        margin: 5px;
      }
      .el-button {
        margin: 5px;
      }
      .reset {
        background-color: white;
        color: #c0c4cc;
        border: 1px solid #c0c4cc;
      }
      .reset:hover {
        color: #0bb197;
      }
    }
    .body {
      width: 100%;
      background-color: #ffffff;
      border-radius: 8px;
      .bodyHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        p {
          color: #3c4145;
          margin: 20px 0px 0px 20px;
          font-weight: bold;
        }
        .el-button {
          margin: 20px 20px 0px 20px;
        }
      }
      .el-pagination {
        margin: 20px 10px 50px 0px;
        text-align: right;
      }
    }
  }
}
</style>
<style>
.msg-pagination-container.is-background .el-pager li:not(.disabled).active {
  /*当前选中页数的样式进行修改*/
  background-color: #0bb197;
  color: #fff;
}
.btnColorTTT {
  background-color: #0bb197 !important;
  color: #fff !important;
}
.btnColorCCC {
  background-color: white;
  color: #c0c4cc;
  border: 1px solid #c0c4cc;
}
.btnColorCCC:hover {
  color: #0bb197;
}
</style>
